<template>
	<view class="box">
		<view class="header-bg">
			<view class="header_title">蜜袋互助公示</view>
			<view class="header-date">
				2020年2月第1期
			</view>
			<view class="head-list-box flex flai fljcsb">
		<!-- 		<view class="head-list flex1">
					<text>0</text>
					<text>我已被守护(天)</text>
				</view> -->
				<view class="head-list flex1">
					<text>0</text>
					<text>我已帮助(人)</text>
				</view>
				<view class="head-list flex1">
					<text>0</text>
					<text>本期申请(人)</text>
				</view>
				<view class="head-list flex1">
					<text>0</text>
					<text>本期申请(万元)</text>
				</view>
			</view>
		</view>
		<view class="" v-if="isShow">
			
	
		<view class="box-help">
			<view class="flex flai fljcsb ">
				<text class="detail-title">互助详情</text>
				<view class="look-more flex flai">
					<text>查看更多</text>
					<image src="../../static/image/arrow-right-green.png" mode=""></image>

				</view>
			</view>
			<view class="total-title">
				本期总计有50位蜜袋互助会员等待救助
			</view>
			<view class="scroll-view-container">
				<scroll-view scroll-x="true" :scroll-left="scrollLeftWidth" @scroll="scrollleft" class="scroll-view-x"
				 scroll-with-animation='true' @scrolltolower="lowerRight">

					<view class="flex-wrap sertit-dis flex" :style="{'width':scrollWidth+'px'}">
						<view class='flex-item flex flai fljc' v-for="(item,index) in list" :key="index">
							<image src="../../static/image/home-son.png" mode=""></image>
							<text>张三</text>
						</view>


					</view>
				</scroll-view>
			</view>

		</view>
		<view class="box-help">
			<view class="flex flai ">
				<text class="detail-title">往期公示</text>
			</view>
			<view class="before-box">
				<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<view class="before-time">
								2020年2月5期
							</view>
							<view class="help-person">
								本期互助55人
							</view>
							<view class="help-moeny">
								共汇聚互助金1456万元
							</view>
							<view class="swiper-footer flex flai fljcsb">
								<text class="flex1">查看详情</text>
								<image src="../../static/image/arrow-right-white.png" mode=""></image>
							</view>
						</view>
					</swiper-item>

				</swiper>
			</view>



		</view>
		<view class="box-help">
			<view class="flex flai ">
				<text class="detail-title">资金公示</text>
			</view>
			<view class="flex flai fljcsb">
				<view class="money-list flex1">
					<text>0</text>
					<text>互助基金总额</text>
				</view>
				<view class="money-list flex1">
					<text>0</text>
					<text>互助基金余额</text>
				</view>
				<view class="money-list flex1">
					<text>0</text>
					<text>互助基金支付金额</text>
				</view>
			</view>
		</view>
		<view class="box-help">
			<view class="flex flai fljcsb">
				<text class="detail-title">蜜袋爱心探访</text>
				<view class="look-more flex flai">
					<text>查看更多</text>
					<image src="../../static/image/arrow-right-green.png" mode=""></image>

				</view>
			</view>
			<view class="flex flai fljcsb data-box">
				<view class="before-data">
					<view class="" style="color: #999;font-size:24rpx">
						截止到目前为止：
					</view>
					<view class="data-detail">
						共互助<text>0</text>人
					</view>
					<view class="data-detail">
						探访会员<text>0</text>人

					</view>
					<view class="data-detail">
						共<text>0</text>人

					</view>
				</view>
				<image src="../../static/image/hzpb_3.png" mode="" class="map"></image>
			</view>

		</view>
		<view class="box-help">
			<view class="flex flai fljcsb">
				<text class="detail-title">不予互助案例</text>
				<view class="look-more flex flai">
					<text>查看更多</text>
					<image src="../../static/image/arrow-right-green.png" mode=""></image>

				</view>
			</view>
			<view style="margin-top:40rpx">


				<view class="no-help-ex">
					<text>会 员:</text>
					<text>徐女士</text>
				</view>
				<view class="no-help-ex">
					<text>确诊疾病:</text>
					<text>乳腺癌</text>
				</view>
				<view class="no-help-ex">
					<text>拒绝依据:</text>
					<text>疾病不再互助范围内</text>
				</view>
				<view class="look-detail flex flai fljc">
					<text>点击查看详情</text> <image src="../../static/image/arrow-right-green.png" mode=""></image>
				</view>
			</view>
		</view>
			</view>
			<view class="no-data flex fljc flai" v-else>
				<image src="../../static/image/public_1.png" mode=""></image>
				<text>等待期，暂无公示详情数据</text>
			</view>
		<view class="concat flex flai fljc"  @click="call">
			<image src="../../static/image/myHelp_11.png" mode=""></image>
			<text>在线客服</text>
		</view>
		<!-- 弹窗模板 -->
		<uni-pops ref="uniPops"></uni-pops>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
				scrollWidth: 0,
				scrollLeftWidth: 0,
				windowWidth: 0,
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				isShow:false
			}
		},
		onShow() {
			this.getScrollWidth()
			// this.getList()
		},
		methods: {
			getList(){
				api.helpPublic.helpInfo().then(res=>{
					
				})
			},
			getScrollWidth() {
				var scrollWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollWidth = scrollWidth / 5 * 6,
					this.windowWidth = scrollWidth

			},
			scrollleft: function(e) {
			},
			lowerRight: function(e) {
		
			},
			// 拨打电话
			call() {
				this.$refs.uniPops.show()
			},

		}
	}
</script>

<style>
	@import "../../static/css/common.css";
	@import "./style.css";
	@import url("../myMutualHelp/myMutualHelp.css");
</style>
